<template>
  <div class="content">

    <div class="content_middle" ref="" style="width:2022px;height: 1600px;">
      <!-- <dv-flyline-chart-enhanced :config="config" :dev="true" style="height: 1600px" /> -->
      <div class="content_middle_head">
        <img src="../../assets/img/center/head/icon.png" alt="">
        <p>国家电网泉州市公司党建发展图示</p>
      </div>
      <div class="content_middle_map" ref="myChart" style="width:2022px;height: 1400px;"></div>
    </div>

    <div class="content_bottom">
      <div class="content_bottom_left">
        <div class="content_bottom__con content_bottom_left_con">
          <div class="content_bottom__head">
            <img src="../../assets/img/center/jifenpaihang/icon.png" alt="">
            <p>积分排行</p>
            <img src="../../assets/img/center/jifenpaihang/head_icon.png" alt="">
          </div>
          <div class="content_bottom__wrap">
            <dv-scroll-board :config="config1" ref="scrollBoard" style="width:800px;height:400px;margin:0 auto;" class="content_bottom__content" />
            <!-- <table class="content_bottom__content">
              <tr class="content_bottom_table_head">
                <th>姓名</th>
                <th>设备积分</th>
                <th>打卡积分</th>
              </tr>
              <tr v-for="(item, index) in scoreRank" :key="index" class="content_bottom_table_content">
                <td :class="'bg_' + index">{{item.userName}}</td>
                <td>{{item.equipmentIntegral}}</td>
                <td>{{item.clockIntegral}}</td>
              </tr>
            </table> -->
          </div>
        </div>
      </div>
      <div class="content_bottom_right">
        <div class="content_bottom__con content_bottom_right_con">
          <div class="content_bottom__head">
            <img src="../../assets/img/center/sanfenyike/icon.png" alt="">
            <p>三会一课数据量</p>
            <img src="../../assets/img/center/sanfenyike/head_icon.png" alt="">
          </div>
          <div class="content_bottom__wrap">
            <dv-scroll-board :config="config2" ref="scrollBoard2" style="width:800px;height:400px;margin:0 auto;" class="content_bottom__content" />
            <!-- <table class="content_bottom__content">
              <tr class="content_bottom_table_head">
                <th>县区</th>
                <th>已上传</th>
                <th>未上传</th>
              </tr>
              <tr v-for="(item, index) in sessionRecordList" :key="index" class="content_bottom_table_content">
                <td>{{item.countyText}}</td>
                <td style="color: #FFBA69;">{{item.uploadNum}}</td>
                <td style="color: #F27575;">{{item.notUploadNum}}</td>
              </tr>
            </table> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// require("echarts-countries-js/echarts-countries-js/china")
// import lines from "@/util/lines"
// require("@/assets/js/fu2_jian4_quan2_zhou1.js")
// require("echarts-china-cities-js/js/shape-with-internal-borders/fu2_jian4_quan2_zhou1")
import "echarts-china-cities-js/echarts-china-cities-js/fu2_jian4_quan2_zhou1"
import center from "./data/center"
import config from "./data/flyline"
import request from "../../api/request"
export default {
  data() {
    return {
      config: config,
      config1: {
        header: ['姓名', '设备积分', '打卡积分'],
        data: [
        ],
        waitTime: 2000,
        headerBGC: 'rgba(0,0,0,0)',
        oddRowBGC: 'rgba(0,0,0,0)',
        evenRowBGC: 'rgba(0,0,0,0)',
        align: ['center','center','center']
      },
      config2: {
        header: ['县区', '已上传', '未上传'],
        data: [
        ],
        waitTime: 2000,
        headerBGC: 'rgba(0,0,0,0)',
        oddRowBGC: 'rgba(0,0,0,0)',
        evenRowBGC: 'rgba(0,0,0,0)',
        align: ['center','center','center']
      },
      timer: null,
      scoreRank: [],
      sessionRecordList: []
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.myChart)
    // this.drawLine()
    if(this.timer){
      clearInterval(this.timer)
    }
      this.getData()
    this.timer = setInterval(() => {
      this.getData()
    }, 10000)
  },
  methods: {
    getData() {
      request({
        url: '/api/v1/scoreRank.json'
      }).then(res => {
        console.log(res)
        // this.scoreRank = res.data
        const data = res.data.map((item, index) => {
          return [
            `<div class="bg__name"><img src="${index < 3 ? require('../../assets/img/center/jifenpaihang/'+ (index + 1) +'.png') : ''}" style="" /><span>${item.userName}</span></div>`,
            `<span>${item.equipmentIntegral}</span>`,
            `<span>${item.clockIntegral}</span>`
          ]
        })
        console.log(data, 'data')
        // this.$set(this.config1, 'data', data)
        this.$refs['scrollBoard'].updateRows(data)
      })
      request({
        url: '/api/v1/sessionRecordList.json'
      }).then(res => {
        console.log(res)
        // this.sessionRecordList = res.data
        const data = res.data.map((item) => {
          return [`<span>${item.countyText}</span>`, `<span>${item.uploadNum}</span>`,`<span>${item.notUploadNum}</span>`]
        })
        console.log(data, 'data')
        // this.$set(this.config1, 'data', data)
        this.$refs['scrollBoard2'].updateRows(data)
      })
      request({
        // url: '/api/v1/orgByType.json',
        url: '/api/v1/orgByCounty.json',
        method: 'post',
        body: {
          // type: 'SGS'
        }
      }).then(res => {
        // console.log(res)
        const list = res.data.map(item => {
          const obj = center.mapDataVal.find(itm => itm.name == item.countytext)
          obj.text = item.total
          obj.memberTotal = item.memberTotal
          return obj
        })
        console.log(list)
        const newCenterData = center.centerData(list)
        console.log(newCenterData)
        this.drawLine(newCenterData)
        // this.sessionRecordList = res.data
      })
    },
    drawLine(centerData) {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$refs.myChart);
      // 绘制图表
      this.myChart.setOption(centerData);
    },
  },
}
</script>

<style scoped>
.content{
  width: 2022px;
  height: 2160px;
  position: absolute;
  left: 1880px;
  top: 0px;
  /* transform: translateX(-50%); */
  /* background-color: #fff; */
}
.content_middle{
  margin-top: 220px;
  position: relative;
}
.content_middle_head{
  display: flex;
  align-items: center;
  position: absolute;
  left: 100px;
  top: 0;
  color: #FFF;
  font-size: 36px;
  font-weight: 300;
}
.content_middle_head img{
  margin-right: 10px;
}
.content_bottom_left{
  width: 896px;
  height: 640px;
  background: url("../../assets/img/center/jifenpaihang/bg.png") no-repeat left top;
  background-size: cover;
  position: absolute;
  bottom: 50px;
  left: 82px;
}
.content_bottom_right{
  width: 896px;
  height: 640px;
  background: url("../../assets/img/center/sanfenyike/bg.png") no-repeat left top;
  background-size: cover;
  position: absolute;
  bottom: 50px;
  right: 82px;
}
.content_bottom__con{
  width: 858px;
  height: 540px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.content_bottom__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 44px 23px 40px;
  font-size: 36px;
  font-weight: 300;
}
.content_bottom__content{
  width: 100%;
  color: #FFF;
}
.content_bottom_table_head{
  font-size: 36px;
  font-weight: 300;
}
.content_bottom_table_head th{
  /* padding: 17px 0px 20px; */
  padding-bottom: 20px;
  font-weight: 300;
}
.content_bottom_table_head th:nth-child(1){
  padding-left: 30px;
}
.content_bottom_table_content td{
  padding: 5px 0;
  font-size: 36px;
  font-weight: bold;
  color: #80E6FF;
}
.content_bottom_table_content td:nth-child(1){
  font-size: 24px;
  color: #FFF;
  font-weight: 300;
  padding-left: 30px;
}
.content_bottom_table_content .bg_0{
  font-size: 24px;
  background: url("../../assets/img/center/jifenpaihang/1.png") no-repeat left center;
  background-position-x: 60px;
}
.content_bottom_table_content .bg_1{
  font-size: 24px;
  background: url("../../assets/img/center/jifenpaihang/2.png") no-repeat left center;
  background-position-x: 60px;
}
.content_bottom_table_content .bg_2{
  font-size: 24px;
  background: url("../../assets/img/center/jifenpaihang/3.png") no-repeat;
  background-position-x: 60px;
  background-position-y: 8px;
}
.content_bottom__wrap{
  height: 400px;
  overflow-y: auto;
}
</style>
<style>
.content .content_bottom__content span{
  text-align: center;
}
.content .content_bottom__content .ceil, .content .content_bottom__content .header-item{
  font-size: 30px;
}
.content .content_bottom__content .bg{
  padding-left: 30px;
}
.content .content_bottom__content .bg__name{
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .content_bottom__content .bg__name img{
  flex-shrink: 0;
}
.content .content_bottom__content .bg__name span{
  display: block;
}
.content .content_bottom__content .bg_0{
  font-size: 24px;
  background: url("../../assets/img/center/jifenpaihang/1.png") no-repeat left center;
  background-position-x: 60px;
}
.content .content_bottom__content .bg_1{
  font-size: 24px;
  background: url("../../assets/img/center/jifenpaihang/2.png") no-repeat left center;
  background-position-x: 60px;
}
.content .content_bottom__content .bg_2{
  font-size: 24px;
  background: url("../../assets/img/center/jifenpaihang/3.png") no-repeat;
  background-position-x: 60px;
  background-position-y: 8px;
}
</style>